
<script src="cyberwin_javascript_query.js">
</script>
<script src="cyberwin_javascript_query_v3.js">
</script>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>足浴店财务报表</title>
    <style>
        /* 基础样式 - 第一份CSS */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            background-color: #2c3e50;
            color: white;
            padding: 20px 0;
            text-align: center;
            margin-bottom: 30px;
            border-radius: 5px;
        }
        
        h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .report-date {
            font-style: italic;
            font-size: 16px;
        }
        
        .summary {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        
        .summary-card {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            flex: 1;
            min-width: 200px;
            margin: 0 10px 10px 0;
            text-align: center;
        }
        
        .summary-card h3 {
            color: #7f8c8d;
            margin-bottom: 10px;
            font-size: 16px;
        }
        
        .summary-card .value {
            font-size: 24px;
            font-weight: bold;
        }
        
        .revenue {
            color: #27ae60;
        }
        
        .expense {
            color: #e74c3c;
        }
        
        .profit {
            color: #3498db;
        }
        
        .charts {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        
        .chart-container {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            flex: 1;
            min-width: 300px;
            margin: 0 10px 10px 0;
        }
        
        .chart-container h2 {
            margin-bottom: 20px;
            font-size: 18px;
            color: #34495e;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ecf0f1;
        }
        
        th {
            background-color: #34495e;
            color: white;
        }
        
        tr:hover {
            background-color: #f8f9fa;
        }
        
        .footer {
            text-align: center;
            color: #7f8c8d;
            margin-top: 50px;
            padding-top: 20px;
            border-top: 1px solid #ecf0f1;
        }

        /* 重复CSS示例 - 第二份与第一份相同的CSS */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            background-color: #2c3e50;
            color: white;
            padding: 20px 0;
            text-align: center;
            margin-bottom: 30px;
            border-radius: 5px;
        }
        
        h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .report-date {
            font-style: italic;
            font-size: 16px;
        }
        
        .summary {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        
        .summary-card {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            flex: 1;
            min-width: 200px;
            margin: 0 10px 10px 0;
            text-align: center;
        }
        
        .summary-card h3 {
            color: #7f8c8d;
            margin-bottom: 10px;
            font-size: 16px;
        }
        
        .summary-card .value {
            font-size: 24px;
            font-weight: bold;
        }
        
        .revenue {
            color: #27ae60;
        }
        
        .expense {
            color: #e74c3c;
        }
        
        .profit {
            color: #3498db;
        }
        
        .charts {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        
        .chart-container {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            flex: 1;
            min-width: 300px;
            margin: 0 10px 10px 0;
        }
        
        .chart-container h2 {
            margin-bottom: 20px;
            font-size: 18px;
            color: #34495e;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ecf0f1;
        }
        
        th {
            background-color: #34495e;
            color: white;
        }
        
        tr:hover {
            background-color: #f8f9fa;
        }
        
        .footer {
            text-align: center;
            color: #7f8c8d;
            margin-top: 50px;
            padding-top: 20px;
            border-top: 1px solid #ecf0f1;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>舒心足浴店 - 财务报表</h1>
            <div class="report-date">报表日期: 2023年10月</div>
        </header>
        
        <section class="summary">
            <div class="summary-card">
                <h3>总收入</h3>
                <div class="value revenue">¥58,240</div>
            </div>
            <div class="summary-card">
                <h3>总支出</h3>
                <div class="value expense">¥32,650</div>
            </div>
            <div class="summary-card">
                <h3>净利润</h3>
                <div class="value profit">¥25,590</div>
            </div>
            <div class="summary-card">
                <h3>客户数量</h3>
                <div class="value">1,248</div>
            </div>
        </section>
        
        <section class="charts">
            <div class="chart-container">
                <h2>每日收入趋势</h2>
                <canvas id="dailyRevenueChart" width="400" height="200"></canvas>
            </div>
            <div class="chart-container">
                <h2>收入与支出对比</h2>
                <canvas id="incomeExpenseChart" width="400" height="200"></canvas>
            </div>
        </section>
        
        <section>
            <h2>服务项目收入明细</h2>
            <table>
                <tr>
                    <th>服务项目</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>总收入</th>
                    <th>占比</th>
                </tr>
                <tr>
                    <td>基础足浴</td>
                    <td>¥68</td>
                    <td>520</td>
                    <td>¥35,360</td>
                    <td>60.7%</td>
                </tr>
                <tr>
                    <td>精油按摩</td>
                    <td>¥128</td>
                    <td>180</td>
                    <td>¥23,040</td>
                    <td>39.6%</td>
                </tr>
                <tr>
                    <td>肩颈护理</td>
                    <td>¥88</td>
                    <td>45</td>
                    <td>¥3,960</td>
                    <td>6.8%</td>
                </tr>
                <tr>
                    <td>足部护理</td>
                    <td>¥58</td>
                    <td>120</td>
                    <td>¥6,960</td>
                    <td>11.9%</td>
                </tr>
                <tr>
                    <td>其他服务</td>
                    <td>-</td>
                    <td>-</td>
                    <td>¥2,920</td>
                    <td>5.0%</td>
                </tr>
            </table>
        </section>
        
        <section>
            <h2>月度支出明细</h2>
            <table>
                <tr>
                    <th>支出项目</th>
                    <th>金额</th>
                    <th>占比</th>
                </tr>
                <tr>
                    <td>员工工资</td>
                    <td>¥18,500</td>
                    <td>56.7%</td>
                </tr>
                <tr>
                    <td>房租水电</td>
                    <td>¥7,200</td>
                    <td>22.1%</td>
                </tr>
                <tr>
                    <td>物料采购</td>
                    <td>¥4,350</td>
                    <td>13.3%</td>
                </tr>
                <tr>
                    <td>设备维护</td>
                    <td>¥1,600</td>
                    <td>4.9%</td>
                </tr>
                <tr>
                    <td>其他支出</td>
                    <td>¥1,000</td>
                    <td>3.1%</td>
                </tr>
            </table>
        </section>
        
        <div class="footer">
            <p>舒心足浴店 © 2023 财务报表系统</p>
        </div>
    </div>

    <script>
        // 每日收入趋势图表
        const revenueCtx = document.getElementById('dailyRevenueChart').getContext('2d');
        const revenueChart = new Chart(revenueCtx, {
            type: 'line',
            data: {
                labels: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
                datasets: [{
                    label: '收入 (¥)',
                    data: [1850, 2100, 1950, 2400, 2200, 2600, 2800],
                    backgroundColor: 'rgba(39, 174, 96, 0.2)',
                    borderColor: 'rgba(39, 174, 96, 1)',
                    borderWidth: 2,
                    tension: 0.3,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // 收入与支出对比图表
        const ieCtx = document.getElementById('incomeExpenseChart').getContext('2d');
        const ieChart = new Chart(ieCtx, {
            type: 'bar',
            data: {
                labels: ['第一周', '第二周', '第三周', '第四周'],
                datasets: [
                    {
                        label: '收入 (¥)',
                        data: [14200, 13800, 15600, 14640],
                        backgroundColor: 'rgba(39, 174, 96, 0.7)'
                    },
                    {
                        label: '支出 (¥)',
                        data: [8100, 7900, 8300, 8350],
                        backgroundColor: 'rgba(231, 76, 60, 0.7)'
                    }
                ]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // 简易Chart构造函数实现（不依赖第三方库）
        function Chart(ctx, config) {
            this.ctx = ctx;
            this.data = config.data;
            this.options = config.options || {};
            this.type = config.type;
            
            this.draw();
        }
        
        Chart.prototype.draw = function() {
            if (this.type === 'line') {
                this.drawLineChart();
            } else if (this.type === 'bar') {
                this.drawBarChart();
            }
        };
        
        Chart.prototype.drawLineChart = function() {
            const ctx = this.ctx;
            const data = this.data;
            const width = ctx.canvas.width;
            const height = ctx.canvas.height;
            
            // 边距
            const padding = 30;
            const innerWidth = width - padding * 2;
            const innerHeight = height - padding * 2;
            
            // 计算数据范围
            const values = data.datasets[0].data;
            const maxValue = Math.max(...values);
            const minValue = Math.min(...values);
            const valueRange = maxValue - minValue;
            
            // 绘制坐标轴
            ctx.beginPath();
            ctx.moveTo(padding, padding);
            ctx.lineTo(padding, height - padding);
            ctx.lineTo(width - padding, height - padding);
            ctx.stroke();
            
            // 绘制数据线
            ctx.beginPath();
            const points = data.labels.map((label, i) => {
                const x = padding + (i / (data.labels.length - 1)) * innerWidth;
                const y = height - padding - ((values[i] - minValue) / valueRange) * innerHeight;
                return {x, y};
            });
            
            // 绘制填充区域
            if (data.datasets[0].fill) {
                ctx.beginPath();
                ctx.moveTo(points[0].x, height - padding);
                points.forEach(point => {
                    ctx.lineTo(point.x, point.y);
                });
                ctx.lineTo(points[points.length - 1].x, height - padding);
                ctx.closePath();
                ctx.fillStyle = data.datasets[0].backgroundColor;
                ctx.fill();
            }
            
            // 绘制线条
            ctx.beginPath();
            points.forEach((point, i) => {
                if (i === 0) {
                    ctx.moveTo(point.x, point.y);
                } else {
                    ctx.lineTo(point.x, point.y);
                }
            });
            ctx.strokeStyle = data.datasets[0].borderColor;
            ctx.lineWidth = data.datasets[0].borderWidth || 1;
            ctx.stroke();
            
            // 绘制数据点
            points.forEach(point => {
                ctx.beginPath();
                ctx.arc(point.x, point.y, 4, 0, Math.PI * 2);
                ctx.fillStyle = data.datasets[0].borderColor;
                ctx.fill();
            });
            
            // 绘制标签
            data.labels.forEach((label, i) => {
                const x = padding + (i / (data.labels.length - 1)) * innerWidth;
                ctx.textAlign = 'center';
                ctx.fillStyle = '#333';
                ctx.fillText(label, x, height - padding + 15);
            });
        };
        
        Chart.prototype.drawBarChart = function() {
            const ctx = this.ctx;
            const data = this.data;
            const width = ctx.canvas.width;
            const height = ctx.canvas.height;
            
            // 边距
            const padding = 30;
            const innerWidth = width - padding * 2;
            const innerHeight = height - padding * 2;
            
            // 计算数据范围
            const allValues = [].concat(...data.datasets.map(ds => ds.data));
            const maxValue = Math.max(...allValues);
            const barCount = data.labels.length;
            const barGroupWidth = innerWidth / barCount;
            const barWidth = barGroupWidth / (data.datasets.length + 1);
            
            // 绘制坐标轴
            ctx.beginPath();
            ctx.moveTo(padding, padding);
            ctx.lineTo(padding, height - padding);
            ctx.lineTo(width - padding, height - padding);
            ctx.stroke();
            
            // 绘制柱状图
            data.datasets.forEach((dataset, dsIndex) => {
                dataset.data.forEach((value, i) => {
                    const barHeight = (value / maxValue) * innerHeight;
                    const x = padding + i * barGroupWidth + (dsIndex + 1) * barWidth;
                    const y = height - padding - barHeight;
                    
                    ctx.fillStyle = dataset.backgroundColor;
                    ctx.fillRect(x, y, barWidth, barHeight);
                });
            });
            
            // 绘制标签
            data.labels.forEach((label, i) => {
                const x = padding + i * barGroupWidth + barGroupWidth / 2;
                ctx.textAlign = 'center';
                ctx.fillStyle = '#333';
                ctx.fillText(label, x, height - padding + 15);
            });
            
            // 绘制图例
            data.datasets.forEach((dataset, i) => {
                ctx.fillStyle = dataset.backgroundColor;
                ctx.fillRect(padding + i * 100, padding - 20, 10, 10);
                ctx.fillStyle = '#333';
                ctx.fillText(dataset.label, padding + i * 100 + 15, padding - 12);
            });
        };
    </script>
</body>
</html>

